<template>
    <div>
        <!-- <div class="WenJuan" style="background: #b2d1ff; display: flex; justify-content: center; position: relative; display: flex;" v-show="WenJuan">
          <a href="https://aisnl78ssq.feishu.cn/share/base/form/shrcnxL0M2StfIUC7VQ6tigxGYc" target="_blank" ><img src="@a/img/bg90.jpg" /></a>
          <div @click="WenJuan = !WenJuan" style="position: absolute; right: 100px; top: 14px; width: 18px; height: 18px; cursor: pointer;"><img src="@a/img/clase2.svg" style=" width: 18px; height: 18px;"" /></div>
        </div> -->
        <div class="Header">
            <div @click="openNewWindow" class="Header_logo"><img src="@a/img/logo.png" /></div>
            <div  class="Header_right notLogin" v-if="!this.$store.getters.isLogin" @click="toLogin">
              <div class="notLogin_icon"><img src="@a/img/sv29.svg" /></div>
              <div class="notLogin_right">
                <router-link to="/login" class="notLogin_right_btn">登录</router-link>
                <span>/</span>
                <router-link to="/login" class="notLogin_right_btn">注册</router-link>
              </div>
            </div>
			      <div class="mockLoginSign" v-show="this.$store.state.IsMockLogin">当前为模拟登录用户账号，请不要做数据操作！</div>
            <div class="Header_right" v-if="this.$store.getters.isLogin">
                <!-- <a href="https://www.ai-dog.net/download/index.html" target="_blank" class="download">下载客户端</a> -->
                <div class="Header_right_con">
                  <div class="Header_right_avatar"><img :src="this.baseURL + $store.getters.memberInfo.avatar" /></div>
                  <div class="Header_right_txt">
                      <div class="right_txt_title">{{ $store.getters.memberInfo.name }}<i class="el-icon-arrow-down"></i></div>
                      <div class="WPCenter">
                          <div class="WPCenter_content">
                              <div class="WPCenter_top">
                                  <div class="WPCenter_top_user">
                                      <div class="top_user_left"><img :src="this.baseURL + $store.getters.memberInfo.avatar" /></div>
                                      <div class="top_user_right">
                                          <div class="user_right_dd">{{ $store.getters.memberInfo.name }}</div>
                                          <div class="user_right_dt">{{ $store.getters.memberInfo.phone }}</div>
                                      </div>
                                  </div>
                                  <div class="WPCenter_top_bottom">
                                      <div class="top_bottom_dd">当前积分：{{ $store.getters.memberInfo.point_num }}</div>
                                      <div @click="showWindow" class="top_bottom_dt">充值</div>
                                  </div>
                              </div>
                              <div class="WPCenter_bottom">
                                  <router-link to="/memberCentre" class="WPCenter_bottom_list"><i class="el-icon-user"></i>个人中心</router-link>
                                  <!-- <div class="WPCenter_bottom_list"><i class="el-icon-bell"></i>我的消息</div> -->
                                  <div class="WPCenter_bottom_list" @click="logout"><i class="el-icon-switch-button"></i>退出登录</div>
                              </div>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>

        <!-- 充值弹窗 -->
        <rechargeWindow v-if="rechargeShow" @close="rechargeShow = false"></rechargeWindow>
    </div>
</template>

<script>
    import {MessageBox,Message} from 'element-ui';
    import rechargeWindow from "@c/common/rechargeWindow/rechargeWindow";

    export default {
        name: "header",
        data() {
          return {
            rechargeShow: false,
            WenJuan: true,
          };
        },
        components: {
          rechargeWindow
        },
      methods: {
        showWindow(){
          let that = this;
          that.rechargeShow = true;

        },
        openNewWindow() {
          window.open('/', '_blank');
        },
        logout() {
          MessageBox.confirm(`确定要退出登录吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            });
            // 用户点击确定后执行删除操作
            let that = this;
            this.axios.get('/api/member/logout').then(res=>{
                if(res.code === 1) {
                  localStorage.removeItem('token')
                  localStorage.removeItem('memberInfo')
                  that.$store.commit('setLogin', false)
                  that.$store.commit('setMemberInfo', {})
                  this.$router.push({
                    path: '/login',
                  })
                }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出'
            });
            // 用户点击取消或者弹窗关闭时不做任何操作
          });
        },
        toLogin(){
          this.$router.push({
            path: '/login',
          })
        }
      } 
    }
</script>

<style scoped>
    .CustomerService{ position: fixed; right: 25px; bottom: 25px; cursor: pointer;}
    /* { animation: bounce 2s ease-in-out infinite;} */
    /* @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(-10px);
      }
      50% {
        transform: translateY(0);
      }
      75% {
        transform: translateY(-5px);
      }
      100% {
        transform: translateY(0);
      }
    } */
    .Header{background: #fafbff;  height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0px 30px; width: calc(100% - 60px); position: relative;}
    .Header .Header_logo{ cursor: pointer;}
    .Header .Header_logo img{ height: 34px;}
    .Header .Header_right{ display: flex; align-items: center; position: relative;}
    .Header .Header_right .Header_right_con{ display: flex; align-items: center; position: relative;}
    .Header .Header_right .download{ line-height: 34px; background: #3662eb; color: #fff; font-size: 15px; padding: 0px 18px; border-radius: 100px; margin-right: 20px;}
    .Header .Header_right.notLogin{ width: 110px; height: 34px; justify-content: center; border-radius: 100px; background: #3662eb;}
    .Header .Header_right.notLogin .notLogin_icon{ margin-right: 8px;}
    .Header .Header_right.notLogin .notLogin_icon img{ height: 16px; }
    .Header .Header_right.notLogin .notLogin_right{ display: flex; align-items: center;}
    .Header .Header_right.notLogin .notLogin_right span{ font-size: 13px; color: #ffffff; margin: 0px 3px;}
    .Header .Header_right.notLogin .notLogin_right .notLogin_right_btn{ font-size: 13px; color: #fff; display: flex; align-items: center;}
    .Header .Header_right .Header_right_con:hover .WPCenter{ display: block;}
    .Header .Header_right .Header_right_avatar{ width: 34px; height: 34px; border-radius: 100%; overflow: hidden; margin-right: 14px;}
    .Header .Header_right .Header_right_avatar img{ width: 100%; height: 34px; object-fit: cover; border-radius: 100%;}
    .Header .Header_right .Header_right_txt .right_txt_title{ font-size: 14px; color: #474b5a; cursor: pointer;}
    .Header .Header_right .Header_right_txt .right_txt_title i{ margin-left: 6px;}

   .WPCenter{ width: 267px; padding-top: 20px; position: absolute; right: 0px; top: 100%; display: none;}
   .WPCenter:before {content:"";width:0;height:0;border-right:16px solid transparent;border-left:16px solid transparent;border-bottom:16px solid rgba(54,98,235,1);position:absolute;top:12px; right: 30px;}
   .WPCenter .WPCenter_content{ width: 100%; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0px 0px 20px rgba(0,0,0,.1);}
   .WPCenter .WPCenter_top{ background: url("~@/assets/img/bg2.jpg") no-repeat 50%/cover; padding: 22px;}
   .WPCenter .WPCenter_top .WPCenter_top_user{ display: flex; align-items: center; margin-bottom: 30px;}
   .WPCenter .WPCenter_top .WPCenter_top_user .top_user_left{ width: 48px; height: 48px; border-radius: 100%; overflow: hidden; margin-right: 10px;}
   .WPCenter .WPCenter_top .WPCenter_top_user .top_user_left img{ width: 100%; height: 48px; object-fit: cover;}
   .WPCenter .WPCenter_top .WPCenter_top_user .top_user_right .user_right_dd{ font-size: 15px; color: #fff; font-weight: bolder;}
   .WPCenter .WPCenter_top .WPCenter_top_user .top_user_right .user_right_dt{ font-size: 13px; color: #fff; margin-top: 7px;}
   .WPCenter .WPCenter_top .WPCenter_top_bottom{ display: flex; align-items: center; justify-content: space-between;}
   .WPCenter .WPCenter_top .WPCenter_top_bottom .top_bottom_dd{ font-size: 13px; color: #fff;}
   .WPCenter .WPCenter_top .WPCenter_top_bottom .top_bottom_dt{ font-size: 15px; color: #fff; width: 80px; height: 28px; border-radius: 100px; display: flex; align-items: center; justify-content: center; background: #3662eb; cursor: pointer;}
   .WPCenter .WPCenter_bottom{ background: #fff;}
   .WPCenter .WPCenter_bottom .WPCenter_bottom_list{ display: flex; align-items: center; font-size: 15px; color: #474b5a; cursor: pointer; line-height: 48px; padding: 0px 22px;}
   .WPCenter .WPCenter_bottom .WPCenter_bottom_list:hover{ background: #f5f5f5;}
   .WPCenter .WPCenter_bottom .WPCenter_bottom_list:last-child{ margin-bottom: 0;}
   .WPCenter .WPCenter_bottom .WPCenter_bottom_list i{ margin-right: 14px;}
   .WPCenter .WPCenter_bottom .WPCenter_bottom_list i::before{ font-size: 22px; color: #3662eb; position: relative; top: 1px;}
   .mockLoginSign{ color: red;font-size: 16px;top: 0;font-weight: bolder;}
</style>
